import { Component } from 'react';
import Taro from '@tarojs/taro';
import { View, Image } from '@tarojs/components'
import Iconfont from '@/components/Iconfont'
import classnames from 'classnames'
import { connect } from 'react-redux'
import { goToLogin } from '@/utils/login'
const blueLicense = 'https://static3.jekunauto.com/img/others/blue-license.png'
const greenLicense = 'https://static3.jekunauto.com/img/others/green-license.png'
import './style.scss'

interface State{
  carInfo?: ICar | null
  loaded: boolean
}
@connect<any>(({ user }) => ({
  user
}))
export default class CarInfo extends Component<any, State> {
  constructor(props) {
    super(...arguments)
    this.state = {
      loaded: props.loaded
    }
  }

  componentDidMount () {
    // if (this.props.loaded) {
    //   this.setState({
    //     loaded: this.props.loaded
    //   })
    // }
  }
  UNSAFE_componentWillReceiveProps(nextProps) {
    if (!this.state.loaded) {
      this.setState({
        loaded: true
      })
    }
  }

  carStyleView() {
    // eslint-disable-next-line no-shadow
    const { carInfo, disabled, user } = this.props
    return (
      <View className='carinfo-content'>
				{
					carInfo ? (
						<View key={carInfo.id} onClick={() => {
							if (disabled) return
							Taro.navigateTo({
								url: '/pages/car/list/index'
							})
						}} className={classnames('carinfo-havecar', {
							'hide': !carInfo
						})}
						>
							<View className='carinfo-lf'>
								<View className='carinfo-lf-top'>
										<Image className='carinfo-logo' src={carInfo.brandLogoUrl} mode='aspectFit' />
										<View className='carinfo-license'>
											<View className='carinfo-license-bg'>
												{
													carInfo.isNewEnergy ? (
														<Image className='carinfo-license-green' src={greenLicense} mode='aspectFit' />
													) : (
														<Image className='carinfo-license-blue' src={blueLicense} mode='widthFix' />
													)
												}
											</View>
											<View className='carinfo-license-name'>{carInfo.carLicense}</View>
										</View>
								</View>
								<View className='carinfo-context'><View className='text'>{carInfo.carModelName || (carInfo.seriesName + carInfo.modelName)}</View></View>
							</View>
							<Image className='carinfo-carimg' src={carInfo.modelPicUrl} mode='aspectFit' />
						</View>
					) : (
						 <View onClick={() => {
						if (user.userInfo.accessId) {
							Taro.navigateTo({
								url: '/pages/car/add/index'
							})
						} else {
							goToLogin()
						}
					}} className={classnames('carinfo-nohavecar', {
						'hide': carInfo
					})}
					>
						<View className='carinfo-icon'><Iconfont size='88' color='#999' name='icon-tianjiacheliang_huabanfuben' /></View>
						<View className='carinfo-context'>请先设置默认车辆信息</View>
						<View className='carinfo-addbtn'>去添加</View>
					</View>)
				}

      </View>
    )
  }

  render() {
    // const { loaded } = this.state
    return <View className='car-3'>{ this.carStyleView() }</View>
  }
}
